Box Model
→盒模型
CSS
https://i.imgur.com/WG75USi.jpghttps://i.imgur.com/UQ5tRfs.png
由外到內：
Margin
容器外部（例如與其它容器之間）的留空距離
此空間是透明的
Margin Collapsing
Border
將內容與 Padding 包圍住的外框
Padding
從容器到內容部份的留空距離
此空間是透明的
Content
容器內如文字、圖片等元素的內容部份
1. height：高度
2. width：寬度
3. padding：內間隔
4. margin：外間隔
padding 和 margin 的值設為 auto 時，值等同 母元素的長寬度 - 當前元素的長寬度
box-sizing
詳細的內距與邊框數值計算準則
border-box
元素所設定的長寬（height、width）為最終顯示結果
內距、邊框都會向內計算
content-box
目前的瀏覽器預設值
元素中的長寬和內距、邊框、外距皆獨立計算
相關連結
フロントエンドのプロ直伝！CSS 余白設定の三原則 ( ＋線の引き方 )
30 道難解的 CSS 排版 第 1 道：認識對齊 I
display(CSS)
overflow(CSS)
position(CSS)
vertical-align(CSS)
尺寸單位(CSS)
置中(CSS)